<template>
   <div class="login-container">
      <!-- 用户名输入 -->
      <div class="input-group">
         <el-icon class="input-icon">
            <User />
         </el-icon>
         <el-input v-model="userName" class="input-field" placeholder="请输入用户名" clearable />
      </div>

      <!-- 密码输入 -->
      <div class="input-group">
         <el-icon class="input-icon">
            <Key />
         </el-icon>
         <el-input v-model="password" class="input-field" type="password" placeholder="请输入密码" show-password clearable />
      </div>

      <!-- 登录按钮 -->
      <div class="button-group">
         <el-button type="success" class="login-button" @click="login">
            登录
         </el-button>
         <!-- <el-button type="primary" @click="$router.push(`/reg`)">注册</el-button> -->
      </div>
   </div>
</template>

<script setup>
import { ref } from "vue";
import { User, Key } from "@element-plus/icons-vue";
import axios from "axios";
import router from "@/router";
import { showToast } from "vant";

const userName = ref("");
const password = ref("");

// 登录逻辑
function login() {
   axios
      .post("http://localhost:1337/api/v1/auth/manager_login", {
         userName: userName.value,
         password: password.value,
      })
      .then((r) => {
         console.log(r.data);
         if (r.data.code == 0) {
            showToast(r.data.data);
         } else if (r.data.code == 1) {
            showToast("登录成功");
            localStorage.setItem("token", r.data.data);
            localStorage.setItem("username", userName.value);
            userName.value = "";
            password.value = "";
            router.push(`/`);
         }
      });
}
</script>

<style scoped>
.login-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background-color: #f5f5f5;
   padding: 20px;
}

.input-group {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
   width: 100%;
   max-width: 300px;
}

.input-icon {
   margin-right: 10px;
   font-size: 20px;
   color: #666;
}

.input-field {
   flex: 1;
}

.button-group {
   display: flex;
   justify-content: center;
   width: 100%;
   max-width: 300px;
}

.login-button {
   width: 100%;
   margin-top: 10px;
}
</style>